<template>
  <div>
    <van-nav-bar
      title="筛选"
      left-text="取消"
      right-text="清除条件"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-cell
      title="配送至"
      icon="location-o"
      :value="cascaderValue"
      size="large"
      is-link
      @click="changeAddress"
      style="margin-bottom: 0.2rem"
    ></van-cell>
    <van-cell
      title="品牌"
      :value="popup.brandData"
      size="large"
      is-link
      @click="select('brandData')"
    />
    <van-cell
      title="零食分类"
      :value="popup.snacksData"
      size="large"
      is-link
      @click="select('snacksData')"
    />
    <van-cell
      title="零食价格"
      :value="popup.snacksPriceData"
      size="large"
      is-link
      @click="select('snacksPriceData')"
    />
    <van-cell
      title="蛋糕分类"
      :value="popup.cakeData"
      size="large"
      is-link
      @click="select('cakeData')"
    />
    <van-cell
      title="蛋糕用途"
      :value="popup.purposeData"
      size="large"
      is-link
      @click="select('purposeData')"
    />
    <van-cell
      title="蛋糕口味"
      :value="popup.flavorData"
      size="large"
      is-link
      @click="select('flavorData')"
    />
    <van-cell
      title="蛋糕尺寸"
      :value="popup.sizeData"
      size="large"
      is-link
      @click="select('sizeData')"
    />
    <van-cell
      title="蛋糕价格"
      :value="popup.cakePriceData"
      size="large"
      is-link
      @click="select('cakePriceData')"
    />
    <van-cell
      title="花分类"
      :value="popup.flowerData"
      size="large"
      is-link
      @click="select('flowerData')"
    />
    <div class="buttonWrap">
      <van-button type="danger" size="mini" class="submit">确定</van-button>
    </div>

    <!-- 选择地区弹窗 -->
    <van-popup
      v-model="show"
      position="right"
      :style="{ width: '80%', height: '100%', backgroundColor: ' #f5f5f5' }"
    >
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        :field-names="fieldNames"
        @finish="addressFn"
      />
    </van-popup>

    <!-- 其他选择弹窗 -->
    <van-popup
      v-model="other"
      position="right"
      :style="{ width: '80%', height: '100%', backgroundColor: ' #f5f5f5' }"
    >
      <van-nav-bar
        :title="popup.changeTitle"
        left-text="取消"
        @click-left="popupLeft"
      />
      <van-cell
        v-for="item in showList"
        :key="item"
        :title="item"
        size="large"
        @click="otherChange(item)"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      other: false,
      cascaderValue: '选择配送地址',
      fieldNames: {
        text: 'name',
        value: 'code',
        children: 'items'
      },
      options: [
        {
          name: '浙江省',
          code: '330000',
          items: [{ name: '杭州市', code: '330100' }]
        },
        {
          name: '江苏省',
          code: '320000',
          items: [
            { name: '南京市', code: '320100' },
            { name: 'ces', code: '321111' }
          ]
        }
      ],
      // 其他弹窗统一配置
      popup: {
        changeTitle: '品牌',
        brandData: '全部', // 品牌
        snacksData: '全部', // 零食分类
        snacksPriceData: '全部', //  零食价格
        cakeData: '全部', // 蛋糕分类
        purposeData: '全部', // 用途
        flavorData: '全部', // 口味
        sizeData: '全部', // 尺寸
        cakePriceData: '全部', // 蛋糕价格
        flowerData: '全部' // 花分类
      },
      brandData: ['全部'], // 品牌
      snacksData: ['全部', '面包糕点', '新鲜水果'], // 零食分类
      snacksPriceData: ['全部', '20元以下', '20-99元'], //  零食价格
      cakeData: ['全部', '鲜奶蛋糕', '水果蛋糕'], // 蛋糕分类
      purposeData: ['全部', '爱人蛋糕'], // 用途
      flavorData: ['全部', '鲜奶', '芝士'], // 口味
      sizeData: ['全部', '2-3人食用', '4-6人食用'], // 尺寸
      cakePriceData: ['全部', '100以下', '100-200元'], // 蛋糕价格
      flowerData: ['全部', '鲜花'], // 花分类
      showList: [],
      flag: ''
    }
  },
  methods: {
    onClickLeft() {
      //  取消
      this.$emit('cancel')
    },
    onClickRight() {
      // 清除条件
      for (const key in this.popup) {
        this.popup[key] = '全部'
      }
    },
    changeAddress() {
      // 选择地址弹窗
      this.show = true
    },
    addressFn(value) {
      // 地址选择完成事件
      this.cascaderValue = value.selectedOptions[1].name
      this.show = false
    },
    popupLeft() {
      // 其他选择弹窗取消事件
      this.other = false
    },
    // 其他选择弹窗点击事件
    select(value) {
      this.flag = value
      this.showList = this[value]
      this.other = true
    },
    otherChange(item) {
      // 其他选择确认
      this.popup[this.flag] = item
      this.other = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__text {
  color: #ff4463;
}
.buttonWrap {
  text-align: center;
  .submit {
    width: 80%;
    margin: 0 auto;
    height: 0.6rem;
    background: #f35255;
    border: 0;
    border-radius: 0.1rem;
    font-size: 0.3rem;
  }
}
</style>
